﻿<script setup lang="ts" name="Cropping">
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import { useUserInfoStoreWithOut } from '@/store/storage/userInfoStore'
const route = useRoute()
const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)
const userInfoStore = useUserInfoStoreWithOut()
const { userInfo } = storeToRefs(userInfoStore)

// 滚动行为
useScrollPosition(route)

const info = ref('')
const cropperImage = ref(userInfo.value.avatar || '')
const handleCropper = (obj) => {
  cropperImage.value = obj.value
  info.value = obj.imgInfo
}

const circleInfo = ref('')
const circleImage = ref(userInfo.value.avatar || '')
const handleCircleCropper = (obj) => {
  circleImage.value = obj.value
  circleInfo.value = obj.imgInfo
}
</script>

<template>
  <el-space :size="systemConfig.space" fill>
    <el-row :gutter="systemConfig.space">
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>头像裁剪</span>
            </div>
          </template>
          <cropper-avatar :width="240" :value="userInfo.avatar"></cropper-avatar>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="systemConfig.space">
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>矩形裁剪</span>
            </div>
          </template>
          <div class="cropper-panel">
            <CropperWrap :value="cropperImage" :circled="false" @fileChange="handleCropper"></CropperWrap>
            <p v-if="cropperImage">裁剪后图片信息：{{ info }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="systemConfig.space">
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>圆形裁剪</span>
            </div>
          </template>
          <div class="cropper-panel">
            <CropperWrap :value="circleImage" :circled="true" @fileChange="handleCircleCropper"></CropperWrap>
            <p v-if="circleImage">裁剪后图片信息：{{ circleInfo }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  display: block;
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.el-card {
  :deep(.el-card__body) {
    display: flex;
    align-items: center;
    justify-content: center;

    .cropper-panel {
      flex: 1;

      p {
        margin-top: 20px;
      }
    }
  }
}
</style>
